<!--
 * @description  : 市管-日计划制定-添加双随机任务
 * @descriptionDetail: 市管-日计划制定-添加双随机任务
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-05 14:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<me-table :i="0" :top="10" :index="0" :load-data="loadData" :initLoad="false" ref="mescrollItem0">
      :load-data="loadData"
      :initLoad="false"
      ref="mescrollItem0"
    >
      <template #default="d">
        <view class="card">
          <u-row>
            <u-col span="11" @click="getRandomCheck(d.data,d.data.groupUuid,d.data.projectUuid)">
              <random-group-item :client="d.data"></random-group-item>
            </u-col>
            <u-col span="1">
              <u-icon size="36" :name="iconText" @click="closeGroup(d.data)"></u-icon>
            </u-col>
            <u-col span="12" v-if="d.data.isShow">
              <view class="c-line" v-for="(item, index) in d.data.checkList" :key="d.data.groupUuid+'-'+index" @click.stop="handlerSelectItem(item,d.data.groupUuid,)">
                <u-row>
                  <u-col span="10">
                    <client-item :client="item"></client-item>
                  </u-col>
                  <u-col span="2" style="text-align:right;">
                    <u-icon
                      name="checkbox-mark"
                      :color="$theme.u_type_primary"
                      size="38"
                      style="margin-right: 10px;"
                      v-if="selectedUids.includes(item.retailerUuid)"
                    ></u-icon>
                  </u-col>
                </u-row>
              </view>
            </u-col>
          </u-row>
        </view>
      </template>
    </me-table>
  </view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import checkService from "@/service/check/check.service"
	import ClientItem from './components/client-item.vue';
	import RandomGroupItem from './components/random-group-item.vue';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			MeTable,
			ClientItem,
			RandomGroupItem,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: "",
				isSingle: false, // 是否单选，默认多选
				isSupple: false, // 判断是否为货物来源
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				planList: [],
				newList: [],
				searchData: {},
				iconText: 'arrow-down',
				executorList: [],
				groupList: [],
				groupUuids: [],
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onLoad(option) {
			this.isSingle = option.isSingle;
			if (option.isSupple) {
				this.isSupple = true;
			}
			this.searchData.checkDate = option.checkDate;
			let opt = this.getRouteParam();
			this.planList = this.$u.test.array(opt) ? opt : [];
			// console.log(this.planList)
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				console.log("设置零售右侧按钮");
				// 先放开右侧标题
				this.$deviceApi.setRight("确定", () => {
					// 添加日计划操作
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			handlerSearch() {
				this.$refs['mescrollItem0'].refresh();
			},
			// 选中
			handlerSelectItem(item, groupUuid) {
				// e.stopPropagation();
				if (this.isSingle) {
					this.selectedUids = [item.retailerUuid, ];
					this.selectedItems = [item, ];
					return;
				}
				if (this.selectedUids.includes(item.retailerUuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.retailerUuid != item.retailerUuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.retailerUuid));

				if (!this.groupUuids.includes(groupUuid)) {
					this.groupUuids.push(groupUuid);
				}
			},
			// 在线案件查询数据
			loadData(page) {
				// 调用后台接口查询数据：分页参数page.size, page.num
				return checkService.findRandomGroupList({
					page: page.num,
					limit: page.size,
					...this.searchData,
				}).then((rs) => {
					if (rs.data.length > 0) {
						rs.data.forEach((item) => {
							item.checkList = [];
							item.isShow = false;
						});
						this.groupList = rs.data;
					}
					return rs;
				});
			},
			// 根据检查组id查询检查客户列表
			getRandomCheck(data, groupUuid, projectUuid) {
				this.$u.loading("加载中...");
				this.iconText = "arrow-up";
				checkService.findRandomCheckList({
					groupUuid: groupUuid,
					projectUuid: projectUuid,
					...this.searchData,
				}).then((rs) => {
					this.$u.hideLoading();
					if (rs.success) {
						data.checkList = rs.data;
						data.isShow = true;
					}
				}).catch((err) => {
					this.$u.toast(err);
					this.$u.hideLoading();
				})
			},
			closeGroup(data) {
				data.isShow = false;
				this.iconText = "arrow-down";
			},
			// 确定
			handlerSure() {
				let self = this;

				// 零售户添加
				if (this.selectedItems.length == 0) {
					this.$u.toast("请选择任务");
					return;
				}
				this.planList.forEach(item => {
					self.newList.push(item.retailerUuid)
				})
				let idList = self.selectedItems.filter(r => {
					return self.newList.includes(r.retailerUuid)
				})
				if (idList.length > 0) {
					this.$u.hideLoading();
					this.selectedItems.filter(item => {
						if (item.retailerUuid == idList[0].retailerUuid) {
							this.$u.toast(`【${item.companyName}】已存在`);
						}
					})
					return
				}
				let checkers = '';
				this.groupList.forEach((item) => {
					if (this.groupUuids.includes(item.groupUuid)) {
						let namesArr = item.membernames ? item.membernames.split(',') : [];
						let idsArr = item.personUuids ? item.personUuids.split(',') : [];
						checkers += item.membernames;
						idsArr.forEach((val, index) => {
							let obj = {
								personUuid: val,
								personName: namesArr[index],
							};
							this.executorList.push(obj);
						})
					}
				})
				console.log(this.selectedItems);
				this.backPrev({
					paramKey: 'randomTask',
					param: {
						executorList: this.executorList,
						list: this.selectedItems,
						checkers: checkers,
					},
				});
				this.selectedUids = this.selectedItems = [];

			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
	}

	.sticky-header {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		height: 40px;
		z-index: 999;
	}

	.c-line {
		padding: 10px 20px 0px;
		border-bottom: 1px solid #d8d8d8;
	}
</style>
